<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../docs/src/assets/image2D.png">
    <script src="../../build/image2D.js"></script>
    <title>image2D - 用例测试 - 色彩</title>
</head>

<body>

    <svg id="random"></svg>
    <svg id="loop"></svg>
    <script>

        // 随机色彩
        var randoms = $$.getRandomColors(30);
        var painter1 = $$('#random').attr({
            "width": 900,
            "height": 30
        }).painter();

        $$('rect', $$('#random')[0])
            .data(randoms)
            .enter('<rect>')
            .appendTo('#random')
            .loop(function (data, index, target) {
                painter1.bind(target).config('fillStyle', randoms[index]).fillRect(index * 30, 0, 30, 30);
            });

        // 循环色彩
        var loops = $$.getLoopColors(30);
        var painter2 = $$('#loop').attr({
            "width": 900,
            "height": 30
        }).painter();

        $$('rect', $$('#loop')[0])
            .data(loops)
            .enter('<rect>')
            .appendTo('#loop')
            .loop(function (data, index, target) {
                painter2.bind(target).config('fillStyle', loops[index]).fillRect(index * 30, 0, 30, 30);
            });

    </script>

</body>

</html>
